'use strict';
import React, { useState, useEffect } from 'react';
import { Form, Input, Switch } from 'antd';
import { layout } from '../conf'
/*
* 组件注释
* create by wuqiong
* creation time 2022/04/22
* 常规
* */


const Index = (props) => {
  const { businessObject, idEditDisabled = true, type } = props;
  const [bpmnElement, setBpmnElement] = useState(window?.bpmnInstances?.bpmnElement || {});
  const [elementBaseInfo, setElementBaseInfo] = useState({});
  const [form] = Form.useForm();

  const resetBaseInfo = () => {
    const bpmnElement = window?.bpmnInstances?.bpmnElement || {};
    setBpmnElement(bpmnElement);

    const elementBaseInfo = JSON.parse(JSON.stringify(bpmnElement.businessObject))

    if (elementBaseInfo && elementBaseInfo.$type === "bpmn:SubProcess") {
      elementBaseInfo = {
        ...elementBaseInfo,
        isExpanded: elementBaseInfo.di?.isExpanded
      }
    }

    form.setFieldsValue({
      id: null,
      name: null,
      versionTag: null,
      isExecutable: null,
      isExpanded: null,
      ...elementBaseInfo
    })
    setElementBaseInfo(elementBaseInfo)
  }
  const updateBaseInfo = (key) => {
    const newElementBaseInfo = form.getFieldsValue();

    if (key === "id") {
      window.bpmnInstances.modeling.updateProperties(bpmnElement, {
        id: newElementBaseInfo[key],
        di: { id: `${newElementBaseInfo[key]}_di` }
      });
      return;
    }
    if (key === "isExpanded") {
      window?.bpmnInstances?.modeling.toggleCollapse(bpmnElement);
      return;
    }
    const attrObj = Object.create(null);
    attrObj[key] = newElementBaseInfo[key];

    window.bpmnInstances.modeling.updateProperties(bpmnElement, attrObj);
    setElementBaseInfo({ ...elementBaseInfo, ...newElementBaseInfo })
  }

  useEffect(() => {
    if (!window.isEmpty(businessObject)) { resetBaseInfo() }
  }, [businessObject])


  return <Form {...layout} form={form} name="control-hooks">
    <Form.Item name="id" label="ID">
      <Input onChange={() => updateBaseInfo('id')} disabled={idEditDisabled || elementBaseInfo.$type === 'bpmn:Process'} allowClear />
    </Form.Item>
    <Form.Item name="name" label="名称">
      <Input onChange={() => updateBaseInfo('name')} allowClear />
    </Form.Item>
    {elementBaseInfo.$type === 'bpmn:Process'
      ? <React.Fragment>
        <Form.Item name="versionTag" label="版本标签"  >
          <Input onChange={() => updateBaseInfo('versionTag')} allowClear />
        </Form.Item>
        <Form.Item name="isExecutable" label="可执行" valuePropName="checked" >
          <Switch onChange={() => updateBaseInfo('isExecutable')} checkedChildren="是" unCheckedChildren="否" />
        </Form.Item>
      </React.Fragment>
      : null}

    {elementBaseInfo.$type === 'bpmn:SubProcess'
      ? <Form.Item name="isExpanded" label="状态" valuePropName="checked" >
        <Switch onChange={() => updateBaseInfo('isExpanded')} checkedChildren="展开" unCheckedChildren="折叠" />
      </Form.Item>
      : null}
  </Form>
};
export default Index;